<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/common.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/course.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/picker.css" />
    <title>{$pcate.name ?: '未名研学'}</title>
</head>

<body>
    <div class="course">
        <!--top select-->
        <div class="top_tap">
            <ul>
                {foreach $lesson_cate as $k=>$v}
                <li {if $ppid==$v.id}class="on" {/if}><a href='javascript:location.replace("{:request()->baseUrl()}?pid={$v.id}")'>{$v.name}</a></li>
                {/foreach}

            </ul>
            <div class="filter">
                <p>筛选</p>
                <img src="__STATIC__/mobile/img/icon_filter.png" alt="" />
            </div>
        </div>
        <!--标题-->
        <div class="about_title">
            <h6>{$pcate.name ?: '课程体系'}</h6>
            <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
        </div>
        <div class="course_box">
            <!--列表-->
            <div class="course_list block">
                <ul>
                    {foreach $lesson as $v}
                    {php}$vid = $v['id'];{/php}
                    <li>
                        <div class="img_box">
                            <img lay-src="{$v.cover ?: ''}" alt=""/>
                        </div>
                        <!--课程标题-->
                        <div class="course_title">
                            <h6>{$v.title ?: ''}</h6>
                        </div>
                        <div class="content_list">
                            {notempty name='v.cover_desc'}
                            {foreach :json_decode($v['cover_desc'],true) as $vv}
                            <div class="content">
                                <span>{$vv ?: ''}</span>
                                <p></p>
                            </div>
                            {/foreach}
                            {/notempty}
                        </div>
                        <div class="course_btn">
                            <a href='{:url("/lesson/$vid")}'>
                                <button>查看详情</button>
                            </a>
                        </div>
                    </li>
                    {/foreach}

                </ul>
            </div>
        </div>

    </div>
    <!--筛选弹窗 研学旅行-->
    <div class="pop_bg course_pop" id="travel">
        <div class="pop_hide" onclick="$('#travel').hide()"></div>
        <div class="pop_content">
            <h5>{$ppid_name ?: ''}</h5>
            <ul class="pop_list">
                {notempty name='lesson_filter'}
                {foreach $lesson_filter as $v}
                {if strpos($v['name'],'城市')===false}
                <li>
                    <!--类目-->
                    <div class="pop_classify">
                        <p>{$v.name}：</p>
                        <div class="all">
                            <span>全部</span>
                            <img src="__STATIC__/mobile/img/icon_down_arrow.png" alt="" />
                        </div>
                    </div>
                    <!--可供选择的-->
                    <div class="select_list">
                        {notempty name='v.children'}
                        {foreach $v.children as $vv}
                        <p data-value="{$vv.id}" {if in_array($vv.id,explode(',',$Think.get.pid))} class="on" {/if}>{$vv.name}</p>
                        {/foreach}
                        {/notempty}
                    </div>
                </li>
                {else}
                <li>
                    <!--类目-->
                    <div class="pop_classify">
                        <p>{$v.name}</p>
                    </div>
                    <!--选择目的城市-->
                    <input type="hidden" value="{$v.children|city_data}">
                    <div class="city_pick" id="picker">
                        <input type="text" id="city" disabled value="" data-value=""/>
                        <img src="__STATIC__/mobile/img/icon_down_arrow.png" alt="" />
                    </div>
                </li>
                {/if}
                {/foreach}
                {/notempty}
                <li>
                    <!--类目-->
                    <div class="pop_classify">
                        <p>课程关键字</p>
                    </div>
                    <!--课程关键字-->
                    <form class="course_search">
                        <input type="text" id="keyword" value="{$Think.get.keywords}" placeholder="请输入课程关键字" />
                        <!--<button type="button">搜索</button>-->
                    </form>
                </li>
            </ul>
            <div class="pop_btn">
                <button class="reset">重置</button>
                <button class="confirm">确定</button>
            </div>
        </div>
    </div>
    <script src="__STATIC__/mobile/js/rem.js"></script>
    <script src="__STATIC__/mobile/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/mobile/js/picker.min.js"></script>
    <script src="__STATIC__/plugs/layui/layui.all.js"></script>

    <script>
        layui.use('flow', function(){
            var flow = layui.flow;
            //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
            flow.lazyimg();
        });
        var nav = $(".top_tap ul");
        var li_width = nav.children("li").eq(0).width()+10;
        var num = nav.find(".on").prevAll().length;
        nav.scrollLeft(li_width*num);

        //显示弹窗
        $('.filter').on('click', function() {
            $('#travel').show()
        })
        //选择类型
        $('.select_list p').on('click', function() {
                $(this).addClass('on').siblings().removeClass('on')
        })
        //重置
        $('.reset').on('click', function() {
                $(this).parents('.pop_btn').prev('.pop_list').children('li').children('.course_search').children('input').val('')
                $(this).parents('.pop_btn').prev('.pop_list').children('li').children('.select_list').each(function() {
                    if ($(this).children('p').hasClass('on')) {
                        $(this).children('p').removeClass('on')
                    }
                })
        })
        //确定
        $('.confirm').on('click', function() {
            //保存选择的数据
            var arr = ['{$ppid}'];
            $(this).parents('.pop_btn').prev('.pop_list').children('li').children('.select_list').children('p').each(function() {
                if ($(this).hasClass('on')) {
                    arr.push($(this).data('value'))
                } else {
                    for (var i in arr) {
                        var index = arr.indexOf($(this).data('value'))
                        if (index != -1) {
                            arr.splice(index, 1)
                        }
                    }
                }
            })
            pid = arr.join(',');
            var city = $('#city').data('value');
            var keywords = $('#keyword').val();
            if(city!='' && city!=undefined){
                pid+=','+city;
            }
            var url = '?pid='+pid;
            if(keywords!='' && keywords!=undefined){
                url+='&keywords='+keywords;
            }
            location.replace(url);
        })
        //选择目的地
        var data1 = JSON.parse($('input[type="hidden"]').val());
        var identifyEl = document.getElementById('picker');
        var identify = new Picker({
            data: [data1]
        });
        identify.on('picker.select', function(selectedVal, selectedIndex) {
            $('#picker').children('input').val(data1[selectedIndex[0]].text)
            $('#picker').children('input').data('value',data1[selectedIndex[0]].value)
        });
        identifyEl.addEventListener('click', function() {
            identify.show()
        });

    </script>
</body>

</html>